<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <script>
        window.CSRF_TOKEN = "{{ csrf_token }}";
        $(document).ready(function (){
            $('#logout').click(function (){
                $.ajax({
                    url:'{% url 'userAuth:logoutApi' %}',
                    type:'get',
                    success:function (response){
                        if(response.code === 200){
                            alert(response.msg)
                            window.location.href = '{% url 'blog:index' %}'
                        }
                    }
                })
            })
        });
    </script>
    {% block css %}
    	
    {% endblock %}

</head>
<body>
<header class="p-3 text-bg-light">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <!--<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                    <use xlink:href="#bootstrap"></use>
                </svg>-->
                <img height="40" src="{% static 'img/logo.png' %}" alt="nimasile">
            </a>
            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="{% url 'blog:index' %}" class="nav-link px-2 text-secondary">主页</a></li>
                <li><a href="{% url 'blog:pub_blog' %}" class="nav-link px-2 text-dark">发布博客</a></li>
                <li><a href="#" class="nav-link px-2 text-dark">Pricing</a></li>
                <li><a href="#" class="nav-link px-2 text-dark">FAQs</a></li>
                <li><a href="#" class="nav-link px-2 text-dark">About</a></li>
            </ul>
            <form method="get" action="{% url 'blog:search'%}" class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input name="key" type="search" class="form-control form-control-dark text-bg-light" placeholder="搜索" aria-label="Search">
            </form>
            {% if user.is_authenticated %}
                <script src="{% static 'js/upload_img.js' %}"></script>
                <link rel="stylesheet" href="{% static 'css/upload_img.css' %}">
                <div class="dropdown text-end">
                  <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    {% if user.profile.icon %}
                        <img src="{{ user.profile.icon.url }}" alt="用户头像" width="32" height="32" class="rounded-circle">
                    {% else %}
                        <!-- 默认头像或占位图 -->
                        <img src="{% static 'img/headinstence.jpg' %}" alt="默认头像" width="32" height="32" class="rounded-circle">
                    {% endif %}
                  </a>
                  <ul class="menu dropdown-menu text-small" style="">

                    <li><button class="dropdown-item" id="openUploadModal">修改头像</button></li>
                    <li><button class="dropdown-item" href="#">Settings</button></li>
                    <li><button class="dropdown-item" href="#">Profile</button></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><button class="dropdown-item" id="logout">退出登录</button></li>
                  </ul>
                </div>
<!-- 上传图片 -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上传图片</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 文件上传容器 -->
                <div class="upload-container">
                    <div id="uploadArea" class="upload-area">
                        <i class="bi bi-cloud-arrow-up display-4 text-muted mb-3"></i>
                        <h5>点击或拖放文件到此处</h5>
                        <p class="text-muted">支持 JPG, PNG, GIF 格式</p>
                        <div id="fileInfo"></div>
                    </div>
                    <!-- 隐藏的文件输入 -->
                    <input type="file" id="fileInput" class="d-none">
                    <!-- 覆盖整个区域的透明标签 -->
                    <label for="fileInput" class="file-input-label"></label>
                </div>

                <!-- 图片预览 -->
                <div class="text-center mb-3">
                    <img id="uploadPreview" src="#" alt="预览" class="img-fluid rounded">
                </div>

                <!-- 图片描述 -->
                <div class="mb-3">
                    <label for="imageDescription" class="form-label">图片描述</label>
                    <textarea class="form-control" id="imageDescription" rows="2"></textarea>
                </div>

                <!-- 上传进度 -->
                <div class="progress d-none" id="uploadProgress">
                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" id="confirmUpload" class="btn btn-primary" disabled>上传</button>
            </div>
        </div>
    </div>
</div>
            {% else %}
            <div class="text-end">
                <a href="{% url 'userAuth:login' %}"><button type="button" class="btn btn-outline-primary me-2">登录</button></a>
                <a href="{% url 'userAuth:register' %}"><button type="button" class="btn btn-warning">注册</button></a>
            </div>
            {% endif %} 

        </div>
    </div>
</header>
<main class="container bg-white m-auto mt-3 p-3 rounded">
    {% block main %}
    	
    {% endblock %}
</main>
</body>
{% block js %}

{% endblock %}
</html>